<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>查看我发布的内容</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      background: #f5f5f5;
      padding: 20px;
    }
    
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: white;
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    h1 {
      color: #333;
      margin-bottom: 20px;
    }
    
    .btn {
      background: #ff2442;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 8px;
      cursor: pointer;
      font-size: 14px;
      margin-bottom: 20px;
    }
    
    .btn:hover {
      background: #ff4569;
    }
    
    .loading {
      text-align: center;
      padding: 40px;
      color: #999;
    }
    
    .error {
      background: #ffebee;
      color: #c62828;
      padding: 12px;
      border-radius: 8px;
      margin-bottom: 20px;
    }
    
    .content-list {
      display: flex;
      flex-direction: column;
      gap: 16px;
    }
    
    .content-item {
      border: 1px solid #e9ecef;
      border-radius: 8px;
      padding: 16px;
      transition: box-shadow 0.2s;
    }
    
    .content-item:hover {
      box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }
    
    .content-header {
      display: flex;
      justify-content: space-between;
      align-items: start;
      margin-bottom: 12px;
    }
    
    .content-title {
      font-size: 16px;
      font-weight: 600;
      color: #333;
    }
    
    .content-status {
      background: #4caf50;
      color: white;
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 12px;
    }
    
    .content-description {
      color: #666;
      font-size: 14px;
      margin-bottom: 12px;
      line-height: 1.5;
    }
    
    .content-meta {
      display: flex;
      gap: 16px;
      font-size: 12px;
      color: #999;
    }
    
    .meta-item {
      display: flex;
      align-items: center;
      gap: 4px;
    }
    
    .content-tags {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
    }
    
    .tag {
      background: #ff2442;
      color: white;
      padding: 4px 12px;
      border-radius: 12px;
      font-size: 12px;
    }
    
    .empty {
      text-align: center;
      padding: 60px 20px;
      color: #999;
    }
    
    .empty-icon {
      font-size: 48px;
      margin-bottom: 16px;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1>📝 我发布的内容</h1>
    
    <button class="btn" onclick="loadMyContent()">刷新</button>
    
    <div id="result"></div>
  </div>

  <script>
    async function loadMyContent() {
      const resultDiv = document.getElementById('result')
      resultDiv.innerHTML = '<div class="loading">加载中...</div>'
      
      // 获取token
      const token = localStorage.getItem('token')
      
      if (!token) {
        resultDiv.innerHTML = '<div class="error">❌ 请先登录！<br>请在前端页面登录后，按F12查看localStorage中的token</div>'
        return
      }
      
      try {
        const response = await fetch('http://localhost:8000/api/content/my?page=1&size=20', {
          headers: {
            'Authorization': `Bearer ${token}`
          }
        })
        
        const data = await response.json()
        
        if (!response.ok) {
          throw new Error(data.message || '请求失败')
        }
        
        if (data.success && data.data && data.data.length > 0) {
          displayContent(data.data)
        } else {
          resultDiv.innerHTML = '<div class="empty"><div class="empty-icon">📭</div><h3>还没有发布任何内容</h3><p>快去发布第一条内容吧！</p></div>'
        }
      } catch (error) {
        resultDiv.innerHTML = `<div class="error">❌ 错误: ${error.message}</div>`
        console.error(error)
      }
    }
    
    function displayContent(contents) {
      const html = contents.map(content => `
        <div class="content-item">
          <div class="content-header">
            <div class="content-title">${content.title}</div>
            <div class="content-status">${content.status === 2 ? '已发布' : '草稿'}</div>
          </div>
          ${content.description ? `<div class="content-description">${content.description}</div>` : ''}
          <div class="content-meta">
            <div class="meta-item">👁️ ${content.view_count}</div>
            <div class="meta-item">❤️ ${content.like_count}</div>
            <div class="meta-item">💬 ${content.comment_count}</div>
            <div class="meta-item">📅 ${new Date(content.created_at).toLocaleString()}</div>
          </div>
          ${content.tag_names && content.tag_names.length > 0 ? `
            <div class="content-tags">
              ${content.tag_names.map(tag => `<span class="tag">${tag}</span>`).join('')}
            </div>
          ` : ''}
        </div>
      `).join('')
      
      document.getElementById('result').innerHTML = `
        <div style="margin-bottom: 16px; color: #999; font-size: 14px;">
          共 ${contents.length} 条内容
        </div>
        <div class="content-list">${html}</div>
      `
    }
    
    // 页面加载时自动获取
    window.onload = () => {
      loadMyContent()
    }
  </script>
</body>
</html>

